<template>
  <div>
    <div class="nav-body">
      <!-- 侧边导航 -->
      <div class="nav-content">
        <!-- 幻灯片 -->
        <div>
          <Carousel autoplay loop>
            <CarouselItem v-for="(item, index) in marketing.CarouselItems" :key="index">
              <router-link to="/goodsList">
                <img :src="item">
              </router-link>
            </CarouselItem>
          </Carousel>
        </div>
      </div>
      <div class="nav-side" ref="navSide">
        <div class="service-bar">
          <div v-if="token != null && token !== ''">
            <div class="user">
              <div class="user_inner">
                <div class="user_avatar">
                  <a class="user_avatar_lk" href="/" target="_blank">
                    <img class="user_avatar_img" alt="avatar" :src="userInfo.img">
                  </a>
                </div>
                <div class="user_show">
                  <span class="wel_text">Hi，{{ user.account }}</span>
                  <p class="user_sl">
                    <a title="登出" class="user_logout" @click="logout">
                      <img class="logout_img" :src="logout_img" alt="logout">
                    </a>
                    <span class="logout_text">登出</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="service">
              <ul class="service_list">
                <li class="service_item">
                  <router-link :to="{ path: `/store` }">
                    <img class="service_ico_img" :src="`static/img/index/icon/location1.svg`" alt="item.title">
                    <span class="service_txt" v-text="`附近门店`"></span>
                  </router-link>
                </li>
                <li class="service_item">
                  <router-link :to="{ name: 'ShoppingCart', params:{userId:user.userId} }">
                    <img class="service_ico_img" :src="`static/img/index/icon/cart1.svg`" alt="item.title">
                    <span class="service_txt" v-text="`购物车`"></span>
                  </router-link>
                </li>
                <li class="service_item">
                  <router-link :to="{ name: 'Coupon', params:{userId:user.userId} }">
                    <img class="service_ico_img" :src="`static/img/index/icon/coupon2.svg`" alt="item.title">
                    <span class="service_txt" v-text="`优惠券`"></span>
                  </router-link>
                </li>
                <li class="service_item">
                  <router-link :to="{ name: 'OrderList', params:{userId:user.userId}}">
                    <img class="service_ico_img" :src="`static/img/index/icon/order_cute.svg`" alt="item.title">
                    <span class="service_txt" v-text="`历史订单`"></span>
                  </router-link>
                </li>
                <li class="service_item">
                  <router-link :to="{ name: 'PointShop', params:{userId:user.userId} }">
                    <img class="service_ico_img" :src="`static/img/index/icon/shop1.svg`" alt="item.title">
                    <span class="service_txt" v-text="`积分商城`"></span>
                  </router-link>
                </li>
                <li class="service_item">
                  <router-link :to="{ name: 'CouponCenter', params:{userId:user.userId} }">
                    <img class="service_ico_img" :src="`static/img/index/icon/user3.svg`" alt="item.title">
                    <span class="service_txt" v-text="`领券中心`"></span>
                  </router-link>
                </li>

              </ul>
            </div>
          </div>
          <div class="user-button-set" v-else>
            <router-link to="/login">
              <div class="user-button-1">
                <el-button type="warning" style="width: 180px">立即登录</el-button>
              </div>
            </router-link>
            <router-link to="/SignUp">
              <div class="user-button-2">
                <el-button type="warning" style="width: 180px">立即注册</el-button>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/vuex/store';
import {mapState, mapActions, mapGetters} from 'vuex';

export default {
  name: 'HomeNav',
  created () {
    this.loadServiceItems();
  },
  data () {
    return {
      logout_img: 'static/img/index/icon/logout.svg'
    };
  },
  computed: {
    ...mapState(['userInfo', 'serviceItems', 'marketing']),
    ...mapGetters(['token', 'user'])
  },
  methods: {
    ...mapActions(['loadServiceItems']),
    async logout () {
      console.log(1);
      this.$store.dispatch('logout').then(() => {
        this.$message.info('退出登录成功');
        setTimeout(() => {
          this.$router.push({path: this.redirect || '/'});
        }, 500);
      });
    }
  },
  mounted () {
  },
  updated () {
  },
  store
};
</script>

<style scoped>
ul li {
  list-style-type: none;
}

.service-bar {
  height: 290px;
  margin-left: 50px;
  margin-top: 0;
  background-color: rgba(254, 244, 230, 0.5);
  border-radius: 15px;
}

.user-button-set {
  height: 200px;
  width: 150px;
  margin-left: 72px;
}

.user-button-1 {
  position: absolute;
  margin-top: 80px;
}

.user-button-2 {
  position: absolute;
  margin-top: 170px;
}

.user {
  margin-top: 5px;
  width: 100%;
  height: 80px;
}

.user_inner {

  width: 100%;
  height: 100%;
}

.user_avatar {
  margin-top: 10px;
  margin-left: 15px;
  width: 60px;
  float: left;
}

.user_avatar_lk {
  margin: 20px;
}

.user_avatar_img {
  width: 40px;
  margin-top: 20px;
}

.user_show {
  margin-top: 10px;
  display: block;
  float: right;
}

.wel_text {
  float: left;
  font-size: 18px;
  margin-top: 30px;
}

.logout_ico {
  margin-top: 30px;
}

.logout_img {
  margin-top: 5px;
  width: 28px;
  display: inline;
}

.logout_text {
  float: right;
  margin-right: 25px;
  margin-top: 10px;
}

.user_logout, .user_show {
  font-weight: bold;
  font-family: 黑体;
  font-size: 14px;
  color: #f5cb1a;
}

.user_sl {
  margin-top: 20px;
  margin-left: 120px;
  display: block;
}

.service {
  margin-top: 15px;
  width: 100%;
  height: 100%;
}

.service_list {
  width: 100%;
  height: 100%;
}

.service_item {
  float: right;
  width: 33%;
  margin: auto;
  text-align: center;
}

.service_ico_img {
  margin-top: 15px;
  width: 36px;
}

.service_txt {
  font-weight: bold;
  font-family: 黑体;
  font-size: 16px;
  color: #f5cb1a;
  display: block;
}

/*大的导航信息，包含导航，幻灯片等*/
.nav-body {
  width: 1020px;
  height: 340px;
  margin: 0px auto;
  margin-top: 30px;
}

.nav-side {
  width: 370px;
  height: 100%;
  padding: 0px;
  color: #fff;
  float: right;
  margin-right: 50px;
}

.nav-side-item:hover {
  cursor: pointer;
  color: #c81623;
}

/*导航内容*/
.nav-content {
  width: 490px;
  margin-left: 70px;
  overflow: hidden;
  float: left;
}

/*导航图片*/
.nav-show-img {
  margin-top: 10px;
  float: left;
}

.nav-show-img:nth-child(2) {
  margin-left: 12px;
}

/*显示商品*/
.content {
  width: 100%;
}

/*显示商品详细信息*/
.detail-item-panel {
  width: 815px;
  height: 485px;
  background-color: #fff;
  position: absolute;
  top: 168px;
  left: 389px;
  z-index: 999;
}

.nav-detail-item {
  margin-left: 26px;
  margin-top: 15px;
  margin-bottom: 15px;
  cursor: pointer;
  color: #eee;
}

.nav-detail-item span {
  padding: 6px;
  padding-left: 12px;
  margin-left: 15px;
  font-size: 12px;
  background-color: #6e6568;
}

.nav-detail-item span:hover {
  margin-left: 15px;
  background-color: #f44336;
}

.detail-item-panel ul {
  list-style: none;
}

.detail-item-panel li {
  line-height: 38px;
  margin-left: 40px;
}

.detail-item-title {
  padding-right: 6px;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  color: #555555;
}

.detail-item-title:hover {
  color: #ecc109;
}

.detail-item-row a {
  color: #555555;
}

.detail-item {
  font-size: 14px;
  padding-left: 12px;
  padding-right: 8px;
  cursor: pointer;
  border-left: 1px solid #ccc;
}

.detail-item:hover {
  color: #ecc109;
}
</style>
